<template>
    <div>
      <h2>个人资料</h2>
      <el-form :model="userInfo" label-width="120px">
        <div class="form-row">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.username" disabled />
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="roleLabel" disabled />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="手机号">
            <el-input v-model="userInfo.userphone" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="userInfo.sex" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="地址">
            <el-input v-model="userInfo.useraddress" />
          </el-form-item>
          <el-form-item label="别名">
            <el-input v-model="userInfo.nickname" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="注册时间">
            <el-input v-model="formattedCreateTime" disabled />
          </el-form-item>
          <el-form-item label="最后更新时间">
            <el-input v-model="formattedUpdateTime" disabled />
          </el-form-item>
        </div>
        <el-button type="primary" @click="updateUserInfo">确认修改</el-button>
      </el-form>
    </div>
  </template>
  
  <script>
  import { userInfoService, userInfoUpdateService } from '@/api/user';
  
  export default {
    data() {
      return {
        userInfo: {
          username: '',
          userphone: '',
          sex: null,
          useraddress: null,
          nickname: null,
          role: 'USER',
          createTime: '',
          updateTime: '',
        }
      }
    },
    computed: {
      roleLabel() {
        return this.userInfo.role === 'ADMIN' ? '管理员' : '用户';
      },
      formattedCreateTime() {
        return new Date(this.userInfo.createTime).toLocaleString();
      },
      formattedUpdateTime() {
        return new Date(this.userInfo.updateTime).toLocaleString();
      }
    },
    created() {
      this.fetchUserInfo();
    },
    methods: {
      async fetchUserInfo() {
        const response = await userInfoService();
        this.userInfo = response.data;
      },
      async updateUserInfo() {
        await userInfoUpdateService(this.userInfo);
        this.$message.success('个人信息更新成功');
      }
    }
  }
  </script>
  
  <style scoped>
  .form-row {
    display: flex;
  }
  .form-row .el-form-item {
    flex: 1;
    margin-right: 20px;
  }
  .form-row .el-form-item:last-child {
    margin-right: 0;
  }
  </style>
  